{% extends 'gamer_view/base.html' %}
{% load static %}

{% block title_block %}
    My Account
{% endblock %}

{% block body_block %}

	<!-- account content box and user image -->
	<div class="content_box">
	<p>Welcome, {{ user.user.username }}</p>
	<p><img src="{{ user.picture.url }}" id="format_profile_image" alt="Profile Picture"></p>
	</div>

	<!-- profile authorised action buttons -->
	<div class="add_button" id="add_review_box">
			<a href="{% url 'gamer_view:add_review' %}" id="add_buttons_text">Add Review</a>
	</div>
	<div class="add_button" id="add_category_box">
			<a href="{% url 'gamer_view:add_category' %}" id="add_buttons_text">Add Category</a>
	</div>
	<div class="add_button" id="add_game_box">
			<a href="{% url 'gamer_view:add_page' %}" id="add_buttons_text">Add Game</a>
	</div>
	
	<!-- user reviews content box -->
		{% if myReviews %}
		<div class="content_box" id="review_box">
		<p> Your Reviews: </p>
		{% for rev in myReviews %}
			<!-- display the game name and the user's rating for it -->
			<div class="add_button" id="review_game_name_button">
				<p><a href={% url 'gamer_view:show_page' rev.gamename.cat rev.gamename.slug %} id="format_hyperlink">{{ rev.gamename }}</a><br></p>
				<!-- display appropriate rating image for the review rating -->
				{% if rev.rating == 1 %}
				<p><img src={%static "images/1.png" %} id="format_user_ratings" alt="Rating"></p>
				{% endif %}
				{% if rev.rating == 2 %}
				<p><img src={%static "images/2.png" %} id="format_user_ratings" alt="Rating"></p>
				{% endif %}
				{% if rev.rating == 3 %}
				<p><img src={%static "images/3.png" %} id="format_user_ratings" alt="Rating"></p>
				{% endif %}
				{% if rev.rating == 4 %}
				<p><img src={%static "images/4.png" %} id="format_user_ratings" alt="Rating"></p>
				{% endif %}
				{% if rev.rating == 5 %}
				<p><img src={%static "images/5.png" %} id="format_user_ratings" alt="Rating"></p>
				{% endif %}
			</div>
			<!-- review description written by the user -->
			<div class="page_button" id="format_user_description">{{ rev.review }}</div>
		{% endfor %}
		</div>
	{% endif %}

	
{% endblock %}